<!-- 电子报 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>北京科技报</title>
    <link href="css/report.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/header.css" rel="stylesheet" />
    <link href="css/public.css" rel="stylesheet" />
    <link href="css/bookstarp.css" rel="stylesheet" />
    <link href="css/swiper.css" rel="stylesheet" />
    <script src="js/swiper.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/request.js"></script>
</head>

<body>
    <div>
        <div class="header_box" id="header_vue">
            <div class="header flex justify-between align-end">
                <div class="flex justify-start align-end">
                    <img class="logo" src="images/logoff.png" />
                    <div class="color-ff sub_title">聚焦科学传播 弘扬科学精神</div>
                </div>
                <div class="flex justify-end align-end header_right">
                    <div class="search_box">
                        <input class="search_input" type="text" placeholder="请输入关键字搜索" />
                        <img class="search_icon" src="images/home/search_icon.png" />
                    </div>
                    <div class="app_box">
                        <img style="height: 36px" src="images/home/app_icon.png" />
                        <div class="font-12 color-ff margin-top-10" style="height: 20px">
                            APP下载
                        </div>
                        <div class="app-container">
                            <div class="app-img-box">
                                <img class="app-img" :src="qrCode" alt="QR Code" />
                                <img class="app-logo" src="images/home/app_icon.png" alt="Logo" />
                            </div>
                            <div class="text-center margin-top-8 font-13">
                                扫码分享当前页面
                            </div>
                        </div>
                    </div>
                    <div class="jz_box">
                        <img style="height: 36px" src="images/home/jz_icon.png" />
                        <div class="font-12 color-ff margin-top-10" style="height: 20px">
                            融媒矩阵
                        </div>
                        <div class="jz-container">
                            <ul>
                                <li class="flex justify-start align-center jz-li">
                                    <img class="jz-li-img" src="images/header/zh.png" alt="" />
                                    <div class="margin-left-14 font-16 text-left jz-li-text">
                                        北京科技报知乎
                                    </div>
                                </li>
                                <li class="flex justify-start align-center jz-li">
                                    <img class="jz-li-img" src="images/header/wx.png" alt="" />
                                    <div class="margin-left-14 font-16 text-left jz-li-text">
                                        北京科技报微信
                                    </div>
                                </li>
                                <li class="flex justify-start align-center jz-li">
                                    <img class="jz-li-img" src="images/header/tt.png" alt="" />
                                    <div class="margin-left-14 font-16 text-left jz-li-text">
                                        北京科技报头条
                                    </div>
                                </li>
                                <li class="flex justify-start align-center jz-li">
                                    <img class="jz-li-img" src="images/header/dy.png" alt="" />
                                    <div class="margin-left-14 font-16 text-left jz-li-text">
                                        北京科技报抖音
                                    </div>
                                </li>
                                <li class="flex justify-start align-center jz-li">
                                    <img class="jz-li-img" src="images/header/wb.png" alt="" />
                                    <div class="margin-left-14 font-16 text-left jz-li-text">
                                        北京科技报微博
                                    </div>
                                </li>
                            </ul>
                            <div class="jz-img-box">
                                <img class="jz-img" :src="qrCode" alt="QR Code" />
                                <img class="jz-logo" src="images/home/app_icon.png" alt="Logo" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header_slider_box">
                <div class="flex justify-between header_slider">
                    <div v-for="(item,index) in sliderList" v-bind:key="index">
                        <div v-if="!item.expand" class="slider_item">
                            <a :class="item.sort == 1? 'active': ''" href="">{{ item.title }}</a>
                            <div v-if="item.sort == 1" class="slider_line"></div>
                        </div>
                        <div v-else class="slider_item" v-on:click.stop="handleExpandSubSlider(item.sort)">
                            <a class="flex align-center">
                                <div>{{ item.title }}</div>
                                <img class="slider_item_expand"
                                    v-bind:class="{'slider_item_retract':page_number == item.sort}"
                                    src="images/down.png" />
                            </a>
                            <div class="sub_slider_box" :class="page_number == item.sort? 'disBlock': ''">
                                <div v-for="(sub,num) in item.subSlider" v-bind:key="num" class="sub_slider">
                                    <a href="">{{ sub.title }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="epaper" class="epaper_content">
            <div class="e_content_top flex justify-between">
                <!-- 整体上部分 -->
                <div class="e_content_top_left">
                    <!-- 导航部分 -->
                    <div class="route_path">
                        <div class="route_path_name">
                            <span>当前位置：</span>
                            <span>首页</span>
                            <span>＞</span>
                            <span class="color-main">电子报</span>
                        </div>
                        <div class="flex align-center bg-ff">
                            <div class="header-xian flex-one"></div>
                            <div class="header-radius"></div>
                        </div>
                    </div>
                    <!-- 左部分 -->
                    <div class="epaper_book" @mouseleave="mouseUp">
                        <div class="epaper_book_content">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item,index) in paper.img_path" :key="index"
                                    :ref="`bookPageC${index}`">
                                    <div class="book_page" :ref="`bookPageI${index}`"
                                        @mousedown="mouseDown($event,index)" @wheel="zoom($event,index)">
                                        <img :src="item.img" style="width: 100%; height: 100%" draggable="false" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="e_btn">
                            <button class="e_btn_pre flex justify-center align-center" @click="handleBookPre()">
                                上一版<img style="width: 15px; transform: rotate(-180deg)" src="./images/syou.png"
                                    alt="" />
                            </button>
                            <button class="e_btn_next flex justify-center align-center" @click="handleBookNext()">
                                下一版<img style="width: 15px" src="./images/syou.png" alt="" />
                            </button>
                        </div>
                    </div>
                    <div class="e_btn_control flex justify-center align-center">
                        <button class="e_btn_control_left" @click="handleEBtnControlLeft()">
                            放大
                        </button>
                        <span class="e_log">{{showScalelog}}</span>
                        <button class="e_btn_control_right" @click="handleEBtnControlRight()">
                            缩小
                        </button>
                    </div>
                </div>
                <div class="e_content_top_right">
                    <!-- 右部分 -->
                    <div class="e_calendar flex justify-between align-center">
                        <div class="calendar">
                            <div class="top-header">
                                <header>
                                    <button class="prev" @click="handlePrev">
                                        <i class="ri-arrow-left-s-line"></i>
                                    </button>
                                    <p class="calendar_title"></p>
                                    <button class="next" @click="handleNext">
                                        <i class="ri-arrow-right-s-line"></i>
                                    </button>
                                </header>
                                <div class="week">
                                    <li>日</li>
                                    <li>一</li>
                                    <li>二</li>
                                    <li>三</li>
                                    <li>四</li>
                                    <li>五</li>
                                    <li>六</li>
                                </div>
                            </div>
                            <div id="e_calendar_content" class="e_calendar_content">
                                <div id="e_calendar_bg" class="e_calendar_bg flex justify-center align-center"></div>
                            </div>
                        </div>
                    </div>
                    <div class="e_page_nav">
                        <!-- 下部分导航 -->
                        <div class="font-24 e_page_nav_title">版面导航</div>
                        <!-- e_page_nav_li_active -->
                        <ul class="e_page_nav_list">
                            <li :class="{'e_page_nav_li_active':index==activeIndex}"
                                v-for="(item,index) in paper.img_path" :key="item.id" @click="handlePageNav(index)">
                                <span class="dot_black"></span>{{item.name}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box_shadow e_content_botton">
                <!-- 整体下部分 -->
                <div class="e_header flex justify-between">
                    <div class="font-24 e_header_title">往期浏览</div>
                    <div class="e_header_butn">
                        <button :class="{'e_header_butn_disable':autoStep<=0}" :disabled="autoStep<=0"
                            class="e_header_butn_left" @click="handlerPre">
                            <i class="e_header_triangle_1"></i>
                            <i class="e_header_triangle_2"></i>
                        </button>
                        <button :class="{'e_header_butn_disable':autoStep>=swiperStep}" :disabled="autoStep>=swiperStep"
                            class="e_header_butn_right" @click="handlerNext">
                            <i class="e_header_triangle_1"></i>
                            <i class="e_header_triangle_2"></i>
                        </button>
                    </div>
                </div>
                <div class="e_swi_content">
                    <!-- 轮播内容 -->
                    <div class="swiper-wrapper">
                        <div class="swiper-slide flex justify-center align-center flex-column" style="cursor: pointer;"
                            v-for="(item,index) in period" :key="index" @click="handlePerioditem(item,index)">
                            <img :src="item?.img_path[0]?.img" />
                            <div class="e_sw_time">{{item.day_time_text}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <iframe style="width: 100%; height: 237px; border: none; overflow: hidden" src="footer.html"
            frameborder="0"></iframe>
    </div>
</body>

</html>
<script src="js/header.js"></script>
<script src="js/report.js"></script>